/*
游戏属性参数添加
*/
<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-steps :space="200"  direction="vertical" :active="2" finish-status="success" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="属性参数"></el-step>
          <el-step title="游戏上架"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="20">
        <el-tabs type="border-card" v-if="attrGroupVos.length > 0">
          <el-tab-pane :label="item.attrGroupName" v-for="item in attrGroupVos" :key="item.attrGroupId">
            <el-form :model="gameAttrVo" :ref="item.attrGroupId" >

              <el-form-item v-for="(ele, index) in item.attrs" :label="ele.attrName" :key="index">
                  <el-input v-model="ele.icon" @change="inputChange($event, ele.attrId, item.attrGroupId)"></el-input>
              </el-form-item>

              <el-button type="success" @click="saveGameAttr(item.attrGroupId)">保存</el-button>
            </el-form>
          </el-tab-pane>
        </el-tabs>

        <el-button type="primary" style="margin-top: 20px" @click="nextStep"
         v-if="this.gameAttrVo.gameId != ''">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import gameAttrGroupRela from "@/api/game/gameAttrGroupRela";
import gameAttrRela from "@/api/game/gameAttrRela";

const map = new Map()
export default {
  name: "gameattradd",

  data() {
    return {
      gameAttrVo: {
        gameId: '',
        attrGroupId: '',
        attrIdValues: []
      },
      attrGroupVos: {},
    }
  },

  created() {
    this.init()
  },

  activated() {

  },

  methods: {
    init() {
      if (this.$route.query && this.$route.query.id) {
        const id = this.$route.query.id
        this.gameAttrVo.gameId = id
        //获取该游戏需要设定的配置参数信息
        this.getAttrGroupVoInfo(id)
      }else {
        //返回发布游戏页面
        this.$confirm(
          `请前往发布游戏页面`,
          "提示",
          {
            confirmButtonText: "确定",
            type: "warning"
          }
        ).then(result => {
          this.$router.push('game-goodsadd')
        })
      }
    },

    //获取游戏绑定的分组、配置信息
    getAttrGroupVoInfo(val) {
      gameAttrGroupRela.getAttrGroupVoInfoByGameId(val)
      .then(result => {
        this.attrGroupVos = result.data
      })
    },

    inputChange(e, id, attrGroupId) {
      //将数据添加到map中
      if (map.has(attrGroupId)) {
        let pList = map.get(attrGroupId)
        pList.push(id + 'attr' + e)
      }else {
        let pList = []
        pList.push(id + 'attr' + e)
        map.set(attrGroupId, pList)
      }
    },


    saveGameAttr(attrGroupId) {
      //解析map
      if (!map.has(attrGroupId)) {
        this.$message({
          type: "error",
          message: "请添加配置参数数据"
        })
        return
      }
      this.gameAttrVo.attrIdValues = map.get(attrGroupId)
      this.gameAttrVo.attrGroupId = attrGroupId
      gameAttrRela.saveGameAttrInfo(this.gameAttrVo)
      .then(result => {
        this.$message({
          type: "success",
          message: "添加成功"
        })
        this.gameAttrVo.attrIdValues = []
      })
    },

    nextStep() {
      this.$router.push({path: 'game-offshelf', query: {id: this.gameAttrVo.gameId}})
    }

  }
}
</script>

<style scoped>

</style>
